<template>
  <div class="couponListRecord">
    <van-nav-bar
      title="历史记录"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="已使用"
        ><coupons urls="/couponsold" class="ff" /> <recommend
      /></van-tab>
      <van-tab title="已过期/失效">
        <van-empty
          class="custom-image"
          image="	https://m.xiaomiyoupin.com/youpin/static/m/res/images/no_result/no_result_order_gray.png"
          description="暂无数据" />
        <recommend
      /></van-tab>
    </van-tabs>

    <!-- <van-popup v-model="show" get-container="#app">nei</van-popup> -->
  </div>
</template>

<script>
import recommend from "./components/Recommend.vue";
import coupons from "./components/coupon/coupons.vue";
export default {
  name: "couponListRecord",
  data() {
    return {
      active:0,
      text: "",
    };
  },
  components: {
    coupons,
    recommend,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style  scoped>
.ff {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}
</style>
<style>
</style>

